<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务列表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            line-height: 40px;
            font-size: 22px;
            font-weight: bold;
            margin-left: 20px;
        }
        .delete{
            line-height: 20px;
            font-size: 14px;
            margin-left: 260px;
        }
        
        .list .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px;
        }
        .list .item .left img{
            width: 60px;
            height: 50px;
            margin-top: 10px;
            
        }
        .list .item .middle{
            line-height: 30px;
        }
        .list .item .middle .name{
           color: rgb(54, 47, 47);
           font-weight: bold;
           font-size: 18px;
           min-width: 240px;
           
        }
        .list .item .middle .desc{
            color: orangered;
            font-size: 14px;
        }
        .right button{
            border-radius: 50%;
            background-color: rgb(46, 133, 248);
            color: white;
            width: 15px;
            border: none; 
        }
        .total{
            background-color: rgba(85, 85, 85, 0.842);
            width: 100%;
            height: 100px;
            position: absolute;
            bottom:0 ;
            
        }
        .total .zongjia{
            color: white;
            margin-left: 50px;
            font-size: 20px;
            margin-top: 10px;
        }
        .total .zongjia .peisong{
            font-size: 12px;
            color: rgb(85, 85, 85);
        }
        .total .btn{
            float: right;
            box-sizing: border-box;
            margin-top: -40px;
            padding: 8px 35px;
            background-color: rgb(122, 202, 2);
            color: white;
            border: none;
            margin-right: 10px;
        }
    </style>
</head>
<body>
     <div id="app">
        <div class="title">已选商品
            <span class="delete">清空</span>
        </div>
        
        <div class="list">
            <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="middle">
                    <div class="name"> {{ item.name }} </div>
                    <div class="desc"> {{ item.desc }} </div>
                </div>
                <div class="right">
                    <button @click="reduce"> {{ item.status <= 5 ? '-' : '+' }} </button>
                    <span>1</span>
                    <button @click="add">{{ item.status >= 1 ? '+' : '-'}}</button>
                </div>
            </div>
        </div>
        <div class="total">
            <div class="zongjia">￥528
                <div class="peisong">另需配送费35元</div>
            </div>
            <button class="btn">去结算</button>
        </div>
    </div>

</body>
</html>
<script src="../js/vue-2.5.21.js"></script>
<script>
    
     var v = new Vue({
            
            el:'#app', //el Vue实例挂载的dom节点
            data: {
                tasklist:[
                    { id:1, pic:'../img/c3.jpg', name:'秋刀鱼/斤',desc:'￥35.00',status:2 },
                    { id:2, pic:'../img/c5.webp', name:'鲜大带鱼/条',desc:'￥45.00',status:1 },
                    { id:3, pic:'../img/c6.webp', name:'鲜活全母皮皮虾/斤',desc:'￥85.00',status:3 },
                    { id:4, pic:'../img/c3.jpg', name:'13-15头鲍鱼/只',desc:'￥95.00',status:4 },
                ]
            } , 
            computed: {} , 
            watch: {} ,
            methods: {} , 
            filters: {} , 
            directives: {} , 
            components: {} , 
        }) 

    </script>
</script>